<template>
  <div class="menuList">
    <div class="avatar"
         @click="dialogVisible = true">
      <el-avatar :src="selfInfo.u_HeadPortrait"></el-avatar>
    </div>
    <!-- 用户名 -->
    <div class="username">
      <span>{{selfInfo.u_NickName}}</span>
    </div>

    <!-- 消息列表 -->
    <div :class="{'leftborder' : isborder === 'messageshow','message': true}"
         style="position:relative"
         @click="isborder='messageshow',clickmenu('message')"><i class="iconfont icon-xiaoxi1"></i>

    </div>
    <!-- 朋友 -->
    <div :class="{'leftborder' : isborder === 'friendsshow','friends' : true}"
         style="position:relative"
         @click="isborder='friendsshow',clickmenu('friends')"><i class="iconfont icon-yonghu"></i>

    </div>

    <!-- 群组 -->
    <div :class="{'leftborder' : isborder === 'groupshow','group' : true}"
         style="position:relative"
         @click="isborder='groupshow',clickmenu('group')"><i class="iconfont icon-qunzu"></i>

    </div>

    <!-- 设置 -->
    <div :class="{'leftborder' : isborder === 'settingshow','setting' : true}"
         style="position:relative"
         @click="isborder='settingshow',clickmenu('setting')"><i class="iconfont icon-shezhi"></i></div>

    <!-- 退出 -->
    <div :class="{'leftborder' : isborder === 'logout','logout' : true}"
         style="position:relative"
         @click="isborder='logout',clickmenu('logout')"><i class="iconfont icon-tuichu"></i></div>

    <el-dialog title=""
               :visible.sync="dialogVisible"
               width="40%"
               append-to-body
               :show-close="false">
      <img :src="selfInfo.u_HeadPortrait"
           style="width:100%;border-radius: 50%;padding:20px">
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'MenuList',
  // 自己的信息
  props: ['selfInfo'],
  data () {
    return {
      // 左边点击后显示蓝色边框 取值分别为message、user、group
      isborder: 'messageshow',
      dialogVisible: false,
      nowmenu: ''
    }
  },
  methods: {
    clickmenu: function (type) { // type 的类型有avatar message friends group setting logout
      this.$emit('menuType', type)
    }
  }
}
</script>

<style lang="less" scoped>
.menuList {
  text-align: center;
  border-right: 1px solid #9195a323;
  i {
    font-size: 30px;
    color: rgb(155, 198, 219);
  }

  .avatar {
    margin-top: 20px;
    cursor: pointer;
  }

  .username {
    span {
      font-size: 12px;
    }
  }

  .message {
    margin-top: 40px;
    border-left: 4px solid #fff;
    padding: 5px 4px;
  }

  .message:hover {
    background-color: rgba(131, 125, 125, 0.37);
    border-radius: 5px;
  }

  .friends {
    margin-top: 30px;
    border-left: 4px solid #fff;
    padding: 5px 4px;
  }

  .friends:hover {
    background-color: rgba(131, 125, 125, 0.37);
    border-radius: 5px;
  }

  .group {
    margin-top: 30px;
    border-left: 4px solid #fff;
    padding: 5px 4px;
  }

  .group:hover {
    background-color: rgba(131, 125, 125, 0.37);
    border-radius: 5px;
  }

  .setting {
    margin-top: 150px;
    border-left: 4px solid #fff;
    padding: 5px 4px;
  }

  .setting:hover {
    background-color: rgba(131, 125, 125, 0.37);
    border-radius: 5px;
  }

  .logout {
    margin-top: 20px;
    border-left: 4px solid #fff;
    padding: 5px 4px;
  }

  .logout:hover {
    background-color: rgba(131, 125, 125, 0.37);
    border-radius: 5px;
  }
}

// 左边选中边框显示
.leftborder {
  border-left: 4px solid #5bacec !important;
  border-radius: 2px 0 0 2px;
  i {
    color: rgb(60, 156, 204);
  }
}

.dot {
  position: absolute;
  left: 0px;
  top: 0;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #ff0000a6;
}
</style>
